<template>
  <div>
    <el-card>
      <el-button
        type="primary"
        :icon="Plus"
        :disabled="categoryStore.category3Id ? false : true"
        @click="showAddAttr"
        >添加属性</el-button
      >
      <el-table border :data="attrList">
        <el-table-column label="序号" type="index" align="center" width="60" />
        <el-table-column
          label="属性名称"
          width="160"
          prop="attrName"
          align="center"
        />
        <el-table-column label="属性值列表">
          <template #default="{ row }">
            <el-tag
              type="success"
              v-for="avl in row.attrValueList"
              :key="avl.id"
              class="attr-tag"
              >{{ avl.valueName }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" align="center">
          <template #default="{ row }">
            <el-tooltip effect="dark" content="修改属性" placement="bottom">
              <el-button
                type="warning"
                :icon="Edit"
                class="mt-30"
                @click="showUpdateAttr(row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="删除属性" placement="bottom">
              <span>
                <el-popconfirm
                  :title="`您真的要删除 ${row.valueName}`"
                  @confirm="deleteOneAttr(row.id)"
                >
                  <template #reference>
                    <el-button type="primary" :icon="Delete"></el-button>
                  </template>
                </el-popconfirm>
              </span>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script lang="ts">
export default {
  name: "LAttr",
};
</script>

<script lang="ts" setup>
import { Plus, Edit, Delete } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { useCategoryStore } from "@/stores/category";
import { useAttrStore } from "@/stores/attr";
import { getAttrListApi, getDeleteAttrListApi } from "@/api/product/attr";
import type { AttrList, AttrItem } from "@/api/product/model/attrmodel";
import { ref, watch } from "vue";
const emit = defineEmits(["setIsShowAttrList"]);
const categoryStore = useCategoryStore();
const attrStore = useAttrStore();
// 进入新增页面
const showAddAttr = () => {
  emit("setIsShowAttrList", false);
};
// 进入修改页面
const showUpdateAttr = (row: AttrItem) => {
  attrStore.$patch({
    id: row.id,
    attrName: row.attrName,
    attrValueList: row.attrValueList,
  });
  emit("setIsShowAttrList", false);
};
const attrList = ref<AttrList>([]);

const updateAttrPage = async () => {
  const { category1Id, category2Id, category3Id } = categoryStore;
  attrList.value = await getAttrListApi({
    category1Id: category1Id as number,
    category2Id: category2Id as number,
    category3Id: category3Id as number,
  });
};
watch(
  () => categoryStore.category3Id,
  async (category3Id) => {
    if (!category3Id) {
      attrList.value = [];
      return;
    }
    updateAttrPage();
  },
  { immediate: true }
);
// 删除一条属性
const deleteOneAttr = async (id: number) => {
  await getDeleteAttrListApi(id);
  updateAttrPage();
  ElMessage.success("删除成功哦");
};
</script>

<style scoped>
.attr-tag {
  margin-right: 10px;
}
</style>
